<script setup>
import { CheckCircleRound, PasswordRound, SecurityRound, PictureInPictureAltRound, HandshakeOutlined } from '@vicons/material'
import { renderIcon } from '@/utils/render-icon'

const options = [
    {
        label: "修改密码",
        key: "password",
        icon: renderIcon(PasswordRound),
        children: [
            {
                label: '旧密改密',
                key: 'old-password'
            },
            {
                label: '邮箱改密',
                key: 'mail-password'
            },
            {
                label: '密保改密',
                key: 'security-password'
            },
        ]
    },
    {
        label: "密保设置",
        key: "security",
        icon: renderIcon(SecurityRound),
    },
    {
        label: "实名认证",
        key: "realname-authentication",
        icon: renderIcon(PictureInPictureAltRound),
    },
    {
        label: "第三方绑定",
        key: "third-party-binding",
        icon: renderIcon(HandshakeOutlined),
    },
];

const currentStatus = ref("process")
const currentStep = ref(1)
function next() {
    if (currentStep.value === null)
        currentStep.value = 1;
    else if (currentStep.value >= 4)
        currentStep.value = null;
    else
        currentStep.value++;
}
function prev() {
    if (currentRef.value === 0)
        currentRef.value = null;
    else if (currentRef.value === null)
        currentRef.value = 4;
    else
        currentRef.value--;
}
</script>


<template>
    <n-layout has-sider position="absolute">
        <n-layout-sider collapse-mode="width" :width="200" bordered>
            <n-menu :options="options" />
        </n-layout-sider>
        <n-layout-content>
            <n-layout position="absolute" content-style="padding: 50px 100px" style="z-index: 1;bottom: auto;">
                <n-steps :current="currentStep" :status="currentStatus">
                    <n-step title="确认旧密码" description="请在输入框中输入旧密码后点击确认" />
                    <n-step title="修改新密码" description="密码按照密码规则输入新密码" />
                    <n-step title="修改完成" description="请牢记新密码，请勿泄露" />
                </n-steps>
            </n-layout>

            <n-layout position="absolute" style="z-index: 0;">
                <n-space vertical align="center" justify="center" style="height: 100%;">
                    <n-form v-if="currentStep === 1" inline size="large" label-placement="left">
                        <n-form-item label="旧密码：">
                            <n-input type="password" placeholder="请输入旧密码"
                                style="-webkit-text-security:disc;width: 300px;" />
                        </n-form-item>
                        <n-form-item>
                            <n-button @click="currentStep = 2" type="success" style="width: 120px;">确定</n-button>
                        </n-form-item>
                    </n-form>
                    <n-form v-else-if="currentStep == 2" size="large" label-placement="left" label-width="auto"
                        autocomplete="off">
                        <n-form-item label="新密码：">
                            <n-input type="password" placeholder="密码需要英文数值组合，长度 6-12" style="width: 300px;" />
                        </n-form-item>
                        <n-form-item label="确认密码：">
                            <n-input autocomplete="off" type="password" placeholder="再次确认新密码" style="width: 300px;" />
                        </n-form-item>
                        <n-form-item label=" ">
                            <n-button @click="currentStep = 3" block type="success">确定</n-button>
                        </n-form-item>
                    </n-form>
                    <n-space vertical align="center" v-if="currentStep === 3">
                        <!-- logo -->
                        <n-icon :size="140" color="rgb(35, 150, 35)" :component="CheckCircleRound"></n-icon>
                        <h3 style="margin: 0;">密码修改成功，请妥善保管好密码</h3>
                    </n-space>
                </n-space>
            </n-layout>
        </n-layout-content>
    </n-layout>
</template>

<style></style>